<template>
  <div class="SupplyChain">
    <div class="banner">
      <!--<swiper :options="swiperOption">-->
      <!--&lt;!&ndash; slides &ndash;&gt;-->
      <!--<swiper-slide :key="index" v-for="(item,index) in bannerImg.data"><img :src="item.path"  @click="bannerHref(item.link)" alt=""></swiper-slide>-->
      <!--&lt;!&ndash; Optional controls &ndash;&gt;-->
      <!--<div class="swiper-pagination"  slot="pagination"></div>-->
      <!--</swiper>-->
      <img class="" src="./../../assets/img/chain/chain2.png" alt="">
    </div>
    <div class="definition">
        <h3 class="t-center">产品定义</h3>
        <h4 class="t-center">Product definition</h4>
      <div class="defiBox">
          <div class="defiText">
            <h5>应收账款保理定义</h5>
            <p>应收账款保理又称应收账款出售，是指企业将应收账款出售给银行或保理商从而获得资金。应收账款保理是一项集贸易融资、商业资信调查、应收账款管理及信用风险控制与坏账担保于一体的新兴综合性金融服务。</p>
          </div>
      </div>
    </div>
    <div class="main">
      <h3 class="t-center">产品优势</h3>
      <h4 class="t-center">Product advantages</h4>
      <ul class="items">
        <li >
          <span class="img"></span>
          <h5>改善财务报表</h5>
          <p>将未到期的应收账款转换为销售收入，改善财务报表</p>
        </li>
        <li>
          <span class="img"></span>
          <h5>节约管理成本</h5>
          <p>资信调查、财务管理和账款追收等由应收账款受让保理商负责，节约管理成本</p>
        </li>
        <li>
          <span class="img"></span>
          <h5>降低融资成本</h5>
          <p>无需抵押，无需担保，减少由互保等行为产生的风险，降低融资成本</p>
        </li>
        <li>
          <span class="img"></span>
          <h5>融资期限灵活</h5>
          <p>融资期限可以突破单笔应收账款的金额和期限，降低企业对资金管理的难度</p>
        </li>
        <li>
          <span class="img"></span>
          <h5>融资速度快</h5>
          <p>与传统银行融资相比，保理业务可突破地域限制，审批手续简单，融资速度快</p>
        </li>
        <li>
          <span class="img"></span>
          <h5>融资成本低</h5>
          <p>与小贷，银行贷款等其他融资方式相比，融资成本低</p>
        </li>
      </ul>
    </div>
    <div class="Process">
      <h3 class="t-center">操作流程</h3>
      <h4 class="t-center">Operating procedures</h4>
      <div class="proList">
        <ul>
          <span>1</span>
          <li></li>
          <span>2</span>
          <li></li>
          <span>3</span>
          <li></li>
          <span>4</span>
        </ul>
        <ol>
          <li>
            <h5>发起融资委托申请</h5>
            <p>物流公司有融资需求，向华晟公司发起融资委托申请，转让应收账款债权</p>
          </li>
          <li>

            <h5>发起融资委托申请</h5>
            <p>物流公司有融资需求，向华晟公司发起融资委托申请，转让应收账款债权</p>
          </li>
          <li>
            <h5>发起融资委托申请</h5>
            <p>物流公司有融资需求，向华晟公司发起融资委托申请，转让应收账款债权</p>
          </li>
          <li>
          <h5>发起融资委托申请</h5>
          <p>物流公司有融资需求，向华晟公司发起融资委托申请，转让应收账款债权</p>
        </li>
        </ol>
      </div>
    </div>
  </div>
</template>

<script>
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'

  export default {
    name: "SupplyChain",
    data(){
      return{
        swiperOption: {
          isShowBanner:false,
          loop:true,
          type: 'bullets',
          spaceBetween: 30,
          autoplay: {
            delay: 3000,
            disableOnInteraction: false,
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            dynamicBullets:true
          },
        },
        bannerImg:{
          data:[]
        },
      }
    },
    components:{
      swiper,
      swiperSlide,
    },
    mounted(){
      this.$api.getBanner().then((res)=>{
        this.bannerImg= res.data;
        this.isShowBanner = true;
      });
    },
    methods:{

    }
  }

</script>

<style lang="scss" scoped>
  .SupplyChain{
    width: 100%;
    height: 100%;
    .banner {
      width: 100%;
      img {
        width: 100%;
      }
    }
    h3{
      font-size:36px;
      font-family:SourceHanSansCN-Bold;
      font-weight:bold;
      color:rgba(51,51,51,1);
      line-height: 34px;
    }
    h4{
      font-size:18px;
      font-family:Arial-BoldMT;
      font-weight:bold;
      color:rgba(51,51,51,1);
      line-height: 13px;
      margin: 10px 0 0 0;
      text-transform: uppercase;
    }
    .definition{
      width: 100%;
      padding:88px 0 30px 0;
      background-color: #fafafa;
      text-align: center;
      .defiBox{
        width:750px;
        height:350px;
        background:rgba(51,51,51,1);
        opacity:0.8;
        margin:60px 0 0 0 ;
        padding:30px 0;
          .defiText{
            width:690px;
            background:rgba(245,245,245,1);
            padding:43px 36px;
            margin:0 auto;
            text-align: center;
            h5{
              font-size:30px;
              font-family:SourceHanSansCN-Medium;
              font-weight:500;
              color:rgba(51,51,51,1);
              line-height:29px;
            }
            p{
              width:594px;
              font-size:24px;
              font-family:SourceHanSansCN-Regular;
              font-weight:400;
              color:rgba(0,0,0,1);
              line-height:36px;
              opacity:0.7;
              margin:34px auto 0 auto ;
            }
          }
      }
    }
    .main{
      padding:60px 0 0 0;
      width: 100%;
      /*height:724px;*/
      p{
        font-size: 24px;
        color: rgba(128, 128, 128, 1);
        opacity: 0.7;
        line-height: 36px;
      }

      .t-center {
        text-align: center;
      }
      .items{
        width: 100%;
        /*margin: 0 auto;*/;
        padding:60px 30px;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

      }

      ul.items li {
        width: 297px;
        text-align: center;
        display: inline-block;
        margin:41px  0 0 0 ;
      }

      ul.items li h5 {
        font-size: 30px;
        color: rgba(51, 51, 51, 1);
        margin: 20px 0 24px 0;
      }
    }
    .Process{
      /*width: 100%;*/
      /*height: 100%;*/
      text-align: center;
      margin:31px;
      padding:49px 0 0 0;
      background-color: rgba(255, 255, 255, 1);
      border-radius:10px;
      .proList{
        margin:60px 67px 0 47px;
        display: flex;
        justify-content: left;
        ul{
          width: 40px;
          display: inline-block;
          li{
            width:2px;
            height:148px;
            background:rgba(231, 31, 24, 1);
            border-radius:10px;
          }
          span{
            display: inline-block;
            width:40px;
            height:40px;
            background:rgba(255,66,28,1);
            border-radius:50%;
            color: #fff;
            font-size:30px;
            font-weight:400;
            position: relative;
            left:-20px;
            padding: 2px;

          }
        }
        ol{
          display: inline-block;
          text-align: left;
          li{

            h5{
              height:29px;
              font-size:30px;
              font-family:SourceHanSansCN-Medium;
              font-weight:500;
              color:rgba(231,31,24,1);
            }
            p{
              font-size:24px;
              font-family:SourceHanSansCN-Regular;
              font-weight:400;
              color:rgba(0,0,0,1);
              line-height:36px;
              margin:30px 0 55px 0;
            }
          }
        }
      }
    }
  }
  /deep/ .swiper-pagination-bullet{
    width: 16px;
    height: 16px;
    background: #fff;
  }
</style>
